<template>
  <div>
    <div v-if="state !== 'detail'" class="div-border-bottom" style="height: 180px; padding-top: 16px; overflow-y: auto;">
      <el-divider content-position="left">流程审批</el-divider>
      <el-form ref="auditForm" :rules="rules" :model="formData" label-width="80px" style="padding-top: 10px;">
        <el-form-item label="处理结果" prop="taskState">
          <el-select v-model="formData.taskState" placeholder="请选择" @change="handleStatusChange">
            <el-option v-if="formBtn.includes('A')" label="审批通过" value="A" />
            <el-option v-if="formBtn.includes('R')" label="审批拒绝" value="R" />
            <el-option v-if="formBtn.includes('D')" label="审批驳回" value="D" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理意见" prop="comment">
          <el-input v-model="formData.comment" type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div style="height: calc(100vh - 390px); padding-top: 14px; overflow-y: auto;">
      <el-divider content-position="left">流程信息</el-divider>
      <div style="padding-top: 5px;">
        <div style="display: flex; justify-content: end;">
          <el-button type="text" size="small" plain icon="el-icon-location-information" @click="handleDiagram">流程轨迹</el-button>
          <el-button type="text" size="small" plain icon="el-icon-time" @click="handleTask">更多记录</el-button>

          <task-his-drawer ref="taskHisDrawer" :param="procInstId" />

          <!-- 详情页面 -->
          <el-dialog title="流程轨迹" :visible.sync="visible" :close-on-click-modal="false" @close="visible = false">
            <instance-diagram :param="procInstId" />
          </el-dialog>
        </div>
        <el-timeline :reverse="true">
          <el-timeline-item
            v-for="(item, index) in list.slice(0, 5)"
            :key="index"
            :timestamp="item.endTime"
            placement="top"
          >
            <el-card>
              <h4>{{ item.taskName }}</h4>
              <p v-if="item.result">{{ item.endTime }}，{{ item.remark }}，{{ item.result === 'A' ? '审批通过' : (item.result === 'R' ? '审批拒绝' : '审批驳回') }}。</p>
              <p v-else>{{ item.endTime }}，{{ item.remark }}。</p>
            </el-card>
            <!--                {{item.taskName}}-->
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
import { handleList } from '@/views/workbench/components/TaskHis/api'
// import { parseTime } from '@/utils'
import TaskHisDrawer from '@/views/workbench/components/TaskHis/Drawer.vue'
import InstanceDiagram from '@/views/flow/components/InstDiagram/index.vue'

export default {
  // 当前页面名称（组件）
  name: 'AuditForm',
  // 引用组件
  components: { InstanceDiagram, TaskHisDrawer },
  directives: { },
  filters: {},
  // props属性
  props: {
    param: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 表单数据对象
      formData: {},
      // 表单校验规则
      rules: {
        // 按需调整
        taskState: [{ required: true, message: '处理结果不能为空', trigger: 'change' }]
        // comment: [{ required: true, message: '处理意见不能为空', trigger: 'change' }]
      },
      visible: false,
      state: 'detail',
      procInstId: undefined,
      formBtn: [],
      list: []
    }
  },
  computed: {},
  watch: {
    param: {
      immediate: true,
      handler(newVal) {
        this.formData = newVal
        this.handleInit()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 查询table数据对象
    handleInit() {
      this.procInstId = this.$route.query.procInstId
      if (this.formData.procDefId) {
        this.state = 'audit'
      } else {
        this.state = 'detail'
      }
      if (this.formData.formBtn) {
        this.formBtn = this.formData.formBtn.split(',')
      }
      delete this.formData.formBtn
      if (this.procInstId) {
        handleList({ procInstId: this.procInstId }).then(res => {
          this.list = res.data
        })
      }
    },
    handleTask() {
      this.$refs.taskHisDrawer.handleInit()
    },
    handleDiagram() {
      this.visible = true
    },
    handleStatusChange(value) {
      // 当选择"拒绝"时添加必填校验，否则移除校验
      if (value === 'R') {
        this.rules.comment = [
          { required: true, message: '请填写拒绝原因', trigger: 'change' }
        ]
      } else {
        this.rules.comment = []
        // 清除可能已有的校验错误
        this.$refs.auditForm.clearValidate('comment')
      }
    },
    // 子组件表单验证方法，通过回调函数返回验证结果
    handleValid(callback) {
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          callback(true, this.formData)
        } else {
          callback(false)
        }
      })
    },
    // 重置表单
    handleRestFormData() {
      // 按需调整
      this.formData = {}
    }
  }
}
</script>
<style>
.div-border-right {
  border-right: 5px solid #e6ebf5;
  border-top: none;
  border-left: none;
  border-bottom: none;
}
.div-border-bottom {
  border-bottom: 5px solid #e6ebf5;
}
</style>
